<template>
	<view>
		<view class="topBox">
			<u-navbar :is-back="false" :border-bottom="false" class="Unavbar">
				<view class="navbar" slot="">
					<image src="../../static/img/saoyisao.png" mode="" @click="scanCode" class="left" style="width: 40upx;height: 40upx;"></image>
					<u-search placeholder="输入商品名称" v-model="keyword" :clearabled="true" :disabled="true" bg-color="#fff" border-color="#FD4543"
					 @click="inpsearch" @search="inpsearch" style="width: 650upx;" ></u-search>
				</view>
			</u-navbar>
			<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :top="SearchHeight+'px'" :bottombar="false"> -->
			<view class="Topsticky">
			<!-- 	<u-tabs-swiper name="goodsTypeName" class="Uswiper" ref="uTabs" :list="typeList" :current="tabsCurrent" @change="tabsChange"
				 active-color="#FD4543" :is-scroll="false" swiperWidth="750" font-size="34rpx" height="90" bar-width="70"></u-tabs-swiper> -->
				<!-- <u-tabs ref="tabs" name="goodsTypeName" :list="typeList" active-color="#FD4543" :current="tabsCurrent" @change="tabsChange" :is-scroll="true" swiperWidth="750" font-size="34rpx" height="90" bar-width="70"></u-tabs> -->
			</view>
		</view>
		<!-- <swiper :style="{height:height+'px'}" class="tab-box" ref="swiper1" :current="swiperCurrent" :duration="200" @change="onswiperchange"
		 @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item,index) in typeList"> -->
				<view>
					<view class="scrollBox">
						<view>
							<view class="banner">
								<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true"
								 cancelable="false" :indicator-color="indicatorColor" :indicator-active-color="indicatorActive" class="swiper-box">
									<swiper-item v-for="(item, index) in slides" :key="index">
										<navigator :url="item.path" open-type="navigate" hover-class="other-navigator-hover" class="swiper-item">
											<image :src="item.path" mode=""></image>
										</navigator>
									</swiper-item>
								</swiper>
							</view>
						</view>
						<view class="section">
							<view class="notice">
								<view class="item">
									<view class="pic" @tap="navigate('../login/index')">
										<image src="../../static/img/notice.png" mode=""></image>
									</view>
									<swiper class="list" vertical="true" autoplay="true" circular="true" interval="2000">
										<swiper-item @tap="noticeDetail(item.id)" v-for="(item, index) in noticeList" :key="index">
											<text style="font-size: 24upx;">{{ item.title }}</text>
										</swiper-item>
									</swiper>
									<view class="more" @click="toPage(0,'/pages/noticeList/noticeList')">
										<text class="text">详情</text>
										<text class="rightIcon iconfont icon-fanhui"></text>
									</view>
								</view>
							</view> 
						<!--<view class="items">
								<view v-for="(item,index) in areList" class="item">
									<navigator :url="item.url" open-type="navigate" hover-class="other-navigator-hover">
										<image :src="item.areaImg"></image>
										<view class="text" style="font-size: 24upx;color: #666666;">{{item.areaName}}</view>
									</navigator>
								</view>
							</view>-->
						</view>
						<view class="twoBanner">
							<u-swiper  @click="toGroud()" :list="twoBanner" mode="dot" height="221"></u-swiper>
						</view>
<!-- 						<view class="midTop">
							<view class="left">
								<view class="tp">
									<view class="title">
										商家直播
									</view>
									<view class="tpImg">
										<image src="" mode=""></image>
										<image src="" mode=""></image>
									</view>
								</view>
								<view class="tp">
									<view class="title">
										口碑推荐
									</view>
									<view class="tpImg">
										<image src="" mode=""></image>
										<image src="" mode=""></image>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="tp">
									<view class="title">
										每日好店
									</view>
									<view class="tpImg">
										<image src="" mode=""></image>
										<image src="" mode=""></image>
									</view>
								</view>
								<view class="tp">
									<view class="title">
										限时抢购
									</view>
									<view class="tpImg">
										<image src="" mode=""></image>
										<image src="" mode=""></image>
									</view>
								</view>
							</view>
						</view> -->
						<!-- <view class="content_head">
							<view class="it" @click="contentCurrent = 1" :class="contentCurrent == 1 ? 'active' : ''">
								全部
							</view>
							<view class="it" @click="contentCurrent = 2" :class="contentCurrent == 2 ? 'active' : ''">
								直播
							</view>
							<view class="it" @click="contentCurrent = 3" :class="contentCurrent == 3 ? 'active' : ''">
								优选好货
							</view>
						</view>
						<view class="fiexdBox" v-if="barStatus"></view> -->
					</view>
					<view class="goodsBox">
						<!-- 瀑布流 -->
						<u-waterfall v-model="flowList" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="box" style="margin-right: 10upx;">
									<view class="items" @click="toPage(0,'/pages/goodsDetail/index?goodsId='+item.goodsId+'&goodsType='+item.goodsType)"
									 v-for="(item, index) in leftList" :key="index+item">
										<image :src="item.coverImgList[0]" mode="widthFix"></image>
										<view class="content">
											<view class="title">
												<view>{{item.goodsName}}</view>
											</view>
											<view class="bottom">
												<view class="left">￥<text class="price">{{item.unitPrice}}</text></view>
												<view class="right">销量:{{item.sales}}</view>
											</view>
										</view>
									</view>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="box" style="margin-left: 10upx;">
									<view class="items" @click="toPage(0,'/pages/goodsDetail/index?goodsId='+item.goodsId+'&goodsType='+item.goodsType)"
									 v-for="(item, index) in rightList" :key="index+item">
										<image :src="item.coverImgList[0]" mode="widthFix"></image>
										<view class="content">
											<view class="title">
												<view>{{item.goodsName}}</view>
											</view>
											<view class="bottom">
												<view class="left">￥<text class="price">{{item.unitPrice}}</text></view>
												<view class="right">销量:{{item.sales}}</view>
											</view>
										</view>
									</view>
								</view>
							</template>
						</u-waterfall>
					</view>
					<u-loadmore :status="status" bg-color="rgba(255,255,255,0)" margin-top='15' margin-bottom='15' @loadmore='laodmore' :loadText="loadText"/>
				</view>
				<!-- <otherPage :height="height"v-show="tabsCurrent!=0" ref="indeComponet"></otherPage> -->
			<!-- </swiper-item>
		</swiper> -->

		<!-- <u-popup v-model="popupShow" mode="center" border-radius="14" :borderStyle="borderStyle" width="431upx" height="388upx">
			<view class="popup">
				<view class="title">公告</view>
				<view class="content">我们的字典里没有借口和放弃只有坚持和努力与执行力,初心不改只为做更好的自己。</view>
				<button type="default" class="btn" @click="popupShow = false">我知道了</button>
				<view type="default" class="Close_btn" @click="popupShow = false">不再提示</view>
			</view>
		</u-popup> -->

	</view>
</template>

<script>
	// import goodsList from '@/components/goods-list/index';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	// import otherPage from './indexComponents/indexComponents'
	import {
		mapMutations
	} from 'vuex';
	import * as api from '../../api/index/index.js';
	import * as goods from '../../api/goods/index'
	import * as index from '../../api/index/index'
	export default {
		componentName: 'goodsList',
		mixins: [MescrollMixin], // 使用mixin
		// components: {
		// 	goodsList,
		// 	otherPage
		// },

		data() {
			return {
				height: 0,
				offsetTop: '0',
				borderStyle: 'border',
				// popupShow: true,
				flowList: [],
				leftList: [],
				rightList: [],
				contentCurrent: 1,
				keyword: '',
				saleShow: false,
				SearchHeight: 0,
				scrollHeight: 0,
				downOption: 100,
				status: 0,
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				empty: {
					use: true, // 是否显示空布局
					icon: "http://www.mescroll.com/img/mescroll-empty.png", // 图标路径
					tip: '~ 暂无相关数据 ~', // 提示
					btnText: '去逛逛 >', // 按钮
					fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
					top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
					zIndex: 99 // fixed定位z-index值
				},
				goodList: [],
				slides: [],
				twoBanner: [{
						image: '../../static/img/pinBanner.png'
					}
				],
				indicatorDots: false,
				indicatorColor: '#000',
				indicatorActive: 'red',
				autoplay: true,
				interval: 4000,
				duration: 500,
				tabsCurrent: 0,
				headerList: [{
						name: '首页'
					},
					{
						name: '洗护'
					},
					{
						name: '美妆'
					},
					{
						name: '家纺'
					},
					{
						name: '白酒'
					},
					{
						name: '手表'
					}
				],
				noticeList: [
					{
						title: '公告'
					}
				],
				// areList: [],
				pageSize: 20,
				pageNum: 1,
				status: 'loading',
				loadText: {
						loadmore: '获取数据错误,点击重新加载',
						loading: '加载中',
						nomore: '没有更多了哦'
					},
				swiperCurrent: 0,
				// typeList: [],
				barStatus: false,
				barStatusStyle: {},
				fixedTop: '',
			};
		},
		computed: {
			proNameCur() {}
		},
		onLoad() {
			// this.getGoodsType()
			this.getSwiper();
			this.getContent();
			this.getGoodsList()
			// this.getAreaLists()
		},
		 onPullDownRefresh() {
			 this.pageNum = 1
			 this.status = 'loading'
			 this.$refs.uWaterfall.clear();
			 this.flowList = []
			 this.getSwiper();
			 this.getContent();
			 this.getGoodsList()
		        setTimeout(function () {
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.height = res.windowHeight - data.height
						this.fixedTop = data.height
					}).exec()
				}
			});
			let info = uni.createSelectorQuery().select(".scrollBox");
			info.boundingClientRect(function(data) { //data - 各种参数
				this.scrollHeight = data.height
			}).exec()
		},
		onReachBottom() {
			if (this.status == 'nomore') {
				uni.showToast({
					title: '已经到底啦',
					icon: 'none'
				})
			}
			this.getGoodsList()
		},
		methods: {
			toGroud(){
				if(!uni.getStorageSync('token') || !uni.getStorageSync('userCode')){
					console.log(123)
					uni.showToast({
						title:'请登录',
						icon:'none'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1000)
				}else{
					console.log(123)
					uni.navigateTo({
						url:'/pages/group/group'
					})
				}
			},
			// getGoodsType() {
			// 	index.configTypeList().then(res => {
			// 		this.typeList = res.data.obj
			// 		this.typeList.unshift({
			// 			goodsTypeName: '首页'
			// 		})
			// 	}).catch(err => {})
			// },
			scroll(e) {
				if (e.detail.scrollTop >= this.scrollHeight) {
					let height = this.fixedTop
					this.barStatusStyle = {
						position: 'fixed',
						width: '100%',
						left: 0,
						top: this.fixedTop + 'px',
						zIndex: 999
					}
					this.barStatus = true
				} else {
					this.barStatusStyle = {}
					this.barStatus = false
				}
			},
			laodmore(){
				this.pageNum = 1
				this.status = 'loading'
				this.$refs.uWaterfall.clear();
				this.flowList = []
				this.getGoodsList()
			},
			// getAreaLists() {
			// 	api.getAreaList().then(res => {
			// 		this.areList = res.data.obj
			// 		this.areList[0].url = "/pages/activity/activity?type=2&areaId="+this.areList[0].areaId
			// 		this.areList[1].url = "/pages/activity/activity?type=1&areaId="+this.areList[1].areaId
			// 		this.areList[2].url = "/pages/activity/activity?type=3&areaId="+this.areList[2].areaId
			// 		this.areList[3].url = "/pages/activity/activity?type=4&areaId="+this.areList[3].areaId
			// 		this.areList[6].url = "/pages/shop/index?areaId="+this.areList[6].areaId
			// 	}).catch(err => {

			// 	})
			// },
			// 获取轮播图
			async getSwiper() {
				try {
					const res = await api.getSwiper();
					this.slides = res.data.obj;
				} catch (error) {
				}
			},
			// 获取公告列表
			async getContent() {
				try {
					const res = await api.getIndexContent();
					this.noticeList = res.data.obj;
				} catch (error) {
					
				}
			},
			// 扫码
			scanCode() {
				uni.scanCode({
					success: function(res) {
						uni.showToast({
							title: '条码内容：' + res.result,
							icon: 'none'
						})
					}
				});
			},
			addRandomData(list) {
				for (let i = 0; i < list.length; i++) {
					// let index = this.$u.random(0, list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(list[i]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			// 搜索
			inpsearch(e) {
				this.keyword = e;
				uni.navigateTo({
					url: '/pages/search/search?keyword'
				});
			},
			getGoodsList() {
				goods.goodsList({
					areaId:1,
					orderType: 1,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then(res => {
					var that = this
					setTimeout(function() {
						if (res.data.obj.length < that.pageSize) {
							that.status = 'nomore'
						}
						that.pageNum++
						that.addRandomData(res.data.obj)
					}, 500)
				}).catch(err => {
					this.status = 'loadmore'
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			toselect(val) {
				this.status = val
				if (this.status == 1) {
					this.saleShow = !this.saleShow
				}
			},

			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				// 第1种: 请求具体接口
				// uni.request({
				// 	url: 'xxxx',
				// 	success: () => {
				// 		// 请求成功,隐藏加载状态
				// 		this.mescroll.endSuccess()
				// 	},
				// 	fail: () => {
				// 		// 请求失败,隐藏加载状态
				// 		this.mescroll.endErr()
				// 	}
				// })
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那么不用第1种方式, 直接mescroll.resetUpScroll()即可
				//this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				// 第3种: 下拉刷新什么也不处理, 可直接调用或者延时一会调用 mescroll.endSuccess() 结束即可
				// this.mescroll.endSuccess()

				// 此处仍可以继续写其他接口请求...
				// 调用其他方法...
			},
			/*上拉加载的回调*/
			upCallback(page) {
				// let pageNum = page.num; // 页码, 默认从1开始
				// let pageSize = page.size; // 页长, 默认每页10条
				// uni.request({
				// 	url: 'xxxx?pageNum=' + pageNum + '&pageSize=' + pageSize,
				// 	success: (data) => {
				// 		// 接口返回的当前页数据列表 (数组)
				// 		let curPageData = data.xxx;
				// 		// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				// 		let curPageLen = curPageData.length;
				// 		// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				// 		let totalPage = data.xxx;
				// 		// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
				// 		let totalSize = data.xxx;
				// 		// 接口返回的是否有下一页 (true/false)
				// 		let hasNext = data.xxx;

				// 		//设置列表数据
				// 		if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
				// 		this.dataList = this.dataList.concat(curPageData); //追加新数据

				// 		// 请求成功,隐藏加载状态
				// 		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				// 		this.mescroll.endByPage(curPageLen, totalPage);

				// 		//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				// 		//this.mescroll.endBySize(curPageLen, totalSize);

				// 		//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				// 		//this.mescroll.endSuccess(curPageLen, hasNext);

				// 		//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
				// 		//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
				// 		//如果传了hasNext,则翻到第二页即可显示无更多数据.
				// 		//this.mescroll.endSuccess(curPageLen);

				// 		// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
				// 		// 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
				// 		setTimeout(() => {
				// 			this.mescroll.endSuccess(curPageLen)
				// 		}, 20)

				// 		//curPageLen必传的原因:
				// 		// 1. 使配置的noMoreSize 和 empty生效
				// 		// 2. 判断是否有下一页的首要依据:
				// 		//    当传的值小于page.size时(说明不满页了),则一定会认为无更多数据;
				// 		//    比传入的totalPage, totalSize, hasNext具有更高的判断优先级;
				// 		// 3. 当传的值等于page.size时(满页),才取totalPage, totalSize, hasNext判断是否有下一页
				// 		// 传totalPage, totalSize, hasNext目的是避免方法四描述的小问题

				// 		// 提示: 您无需额外维护页码和判断显示空布局,mescroll已自动处理好.
				// 		// 当您发现结果和预期不一样时, 建议再认真检查以上参数是否传正确
				// 	},
				// 	fail: () => {
				// 		//  请求失败,隐藏加载状态
				// 		this.mescroll.endErr()
				// 	}
				// })

				// 此处仍可以继续写其他接口请求...
				// 调用其他方法...
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.tabsCurrent = index;
				this.$refs.indeComponet.int(this.typeList[index].subTypeList)
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.tabsCurrent = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			onswiperchange() {}
		}
	};
</script>
<style lang="scss">
	@import './index.scss';
</style>
